<template>
  <div class="app">
    <h1>我是父组件王健林</h1>
    <MySon @erha="handler"></MySon>
    <!-- 
          自定义事件,程序员自己定义的事件！！！

          事件源:MySon组件标签
          事件类型:erha(自定义类型)
          事件的回调函数:handler

          怎么触发自定义事件:在事件源(组件)内部通过$emit方法手动触发自定义事件！！！！
        -->

    <!-- 
        事件源:MySon1组件的实例
       -->
    <MySon1 ref="cur"></MySon1>
  </div>
</template>

<script>
import MySon from "./components/MySon";
import MySon1 from "./components/MySon1";
export default {
  name: "",
  components: {
    MySon,
    MySon1,
  },
  //父组件王健林的方法
  methods: {
    handler(params1, params2) {
      //自定义事件回调里面没有event；
      console.log("爸爸组件", params1, params2);
    },
  },
  //当组件挂载完毕执行一次----mounted
  mounted() {
    //当mounted执行完毕,组件都挂载完毕，渲染完毕。
    //ref能获取到什么呀?真实DOM节点、还可以获取组件实例VC
    //获取事件源:MySon1组件的实例VC
    //  console.log(this.$refs.cur,'事件源myson1组件实例');//打印出来的是:MySon1组件的实例
    //  console.log(this,"这个this即为App组件实例VC");

    //$on|$emit都是Vue.prototype原型对象的方法：vm可以使用,vc可以使用！！！
    //下面的代码代表含义是：给事件源MySon1组件实例绑定一个自定义事件car
    //第一个参数:自定义事件名字    第二个参数:自定义事件的回调
    //  this.$refs.cur.$on('car',(params)=>{
    //      console.log(params);
    //  })

    //错误的想法:
    //相当于给app组件实例绑定事件[div] 、触发的时候却点击【Myson组件实例】p->驴唇不对马嘴！！！
    this.$on("car", (params) => {
      console.log(params);
    });
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
.app {
  width: 100%;
  height: 100%;
  background: #bef;
}
</style>
